<template>
    <el-row :gutter="20">
        <el-col :span="8" :offset="0">
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '20px' }">
                        <template #header>
                            <span>
                                未标记连接
                            </span>
                        </template>
                        <!-- card body -->
                        <el-table
                        :data="unmarkLink"
                        height="300px"
                        style="width: 100%">
                            <el-table-column
                                fixed="left"
                                prop="type"
                                label="类型"
                                width="80">
                            </el-table-column>
                            <el-table-column
                                prop="id"
                                label="ID"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="180">
                                <template #default="scope">
                                    <el-button type="primary" size="small" @click="handleCreate(scope)">生成</el-button>
                                </template>
                            </el-table-column>
                            
                        </el-table>

                    </el-card>
                    
                </el-col>
            </el-row>
            <br/>
            <el-row >
                <el-col :span="24" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '20px' }" v-loading="pushLoading">
                        <template #header>
                            <span>
                                手动推送连接
                            </span>
                        </template>
                        <!-- card body -->
                        <el-form :model="pushForm" ref="form" label-width="80px" size="small" label-position="left">
                            <el-form-item label="类型">
                                <el-checkbox-group v-model="pushForm.type">
                                    <el-checkbox label="资讯" name="news"></el-checkbox>
                                    <el-checkbox label="文章" name="article"></el-checkbox>
                                    <el-checkbox label="供应" name="supply"></el-checkbox>
                                    <el-checkbox label="需求" name="demand"></el-checkbox>
                                    <el-checkbox label="全部" name="all"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="推送方法">
                                <el-radio-group v-model="pushForm.operation">
                                    <el-radio label="最新"></el-radio>
                                    <el-radio label="随机"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                                 <el-button-group>
                                    <el-button type="primary" size="small" @click="pushLink">推送</el-button>
                                </el-button-group>
                            </el-form-item>
                        </el-form>
                        
                       
                    </el-card>
                </el-col>
            </el-row>
            <br/>
            <el-row >
                <el-col :span="24" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '20px' }" v-loading="createMapLoading">
                        <template #header>
                            <span>
                                生成网站地图
                            </span>
                        </template>
                        <!-- card body -->
                        <el-form :model="siteMap" ref="form" label-width="80px" size="small" label-position="left">
                            <el-form-item label="类型">
                                <el-checkbox-group v-model="siteMap.type">
                                    <el-checkbox label="资讯" name="news"></el-checkbox>
                                    <el-checkbox label="文章" name="article"></el-checkbox>
                                    <el-checkbox label="供应" name="supply"></el-checkbox>
                                    <el-checkbox label="需求" name="demand"></el-checkbox>
                                    <el-checkbox label="全部" name="all"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="推送方法">
                                <el-radio-group v-model="siteMap.operation">
                                    <el-radio label="最新"></el-radio>
                                    <el-radio label="随机"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                                 <el-button-group>
                                    <el-button type="primary" size="small" @click="createMap">生成</el-button>
                                    <!-- <el-button type="primary" size="small">查看</el-button>
                                    <el-button type="primary" size="small">下载</el-button> -->
                                </el-button-group>
                            </el-form-item>
                        </el-form>
                        
                        
                    </el-card>
                </el-col>
            </el-row>
            
            
        </el-col>
        <el-col :span="16" :offset="0">
            <el-card shadow="always" :body-style="{ padding: '20px' }">
                <template #header>
                    <span>
                        失效连接查询
                    </span>
                    <div style="float: right; margin: 0 auto">
                        <el-form label-width="80px" size="small" :inline="true">
                            <el-form-item label="">
                                <div style="width: 200px">
                                    <el-input v-model="queryLinkForm.value" placeholder="连接后六位" size="mini" ></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button-group>
                                    <el-button type="primary" size="small" @click="queryLink" v-loading="qLoading">查询</el-button>
                                    <el-button type="primary" size="small" @click="testAll">检测所有</el-button>
                                </el-button-group>
                                
                            </el-form-item>
                        </el-form>
                    </div>
                    
                </template>
                <!-- card body -->
                <el-table
                :data="sts"
                height="875px"
                style="width: 100%">
                   <el-table-column
                        fixed="left"
                        prop="id"
                        label="ID"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="c_name"
                        label="目标页面"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="hash_str"
                        label="连接"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="add_time"
                        label="添加时间"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="p_id"
                        label="目标ID"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        width="180">
                        <template #default="scope">
                            <span v-if="scope.row.status == 1" style="color: green">正常</span>
                            <span v-if="scope.row.status == -1">未知</span>
                            <span v-if="scope.row.status == 0" style="color: red">异常</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-size="100"
                    layout="prev, pager, next"
                    :total="count">
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    
</template>


<script>
import axios from 'axios'
export default {
    name: 'ShortLink',
    data(){
        return {
            unmarkLink: [
                
            ],
            pushForm: {
                type: [],
                operation: ''
            },
            queryLinkForm: {
                value: ''
            },
            siteMap: {
                type: [],
                operation: ''
            },
            sts: [],
            count: 0,
            qLoading: false,
            pushLoading: false,
            createMapLoading: false,
        }
    },
    methods: {
        async createMap(){
            this.createMapLoading = true;
            let data = await axios.post('http://localhost/api/usage/createSiteMap',this.siteMap)
            .then( res=>res.data )
            this.createMapLoading = false;
            if (data['error']){
                this.$message({
                    showClose: true,
                    type: 'error',
                    message: data['message']
                });
            }else{
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: `生成成功`
                });
            }
        },
        async queryLink(){
            this.qLoading = true
            let data = await axios.get(`http://localhost/api/shortlink/ping?hash_str=${this.queryLinkForm.value}`)
            .then(res => res.data)
            .catch(err => {
                console.error(err); 
            })
            this.qLoading = false
            if (data === 1){
                this.$message({
                    showClse: true,
                    type: 'success',
                    message: '连接正常'
                })
            }else{
                this.$message({
                    showClse: true,
                    type: 'error',
                    message: '连接异常'
                })
            }
        },
        async handleCurrentChange(page){
            let data = await axios.get(`http://localhost/api/shortlink?page=${page}`)
            .then(res => res.data)
            .catch(err => {
                console.error(err); 
            })
            data.sts.forEach(item => {
                item.status = -1
            });
            this.sts = data.sts
            this.count = data.count
        },
        async testAll(){
            for (let i = 0; i < this.sts.length; i++) {
                let item = this.sts[i];
                let data = await axios.get(`http://localhost/api/shortlink/ping?hash_str=${item.hash_str}`)
                .then(res => res.data)
                .catch(err => {
                    console.error(err); 
                })
                this.sts[i].status = data
            }
        },
        getSts(){
            return axios.get('http://localhost/api/shortlink?page=1')
        },
        async pushLink(){
            this.pushLoading = true;
            let data = await axios.post('http://localhost/api/usage/pushLink',this.pushForm)
            .then(res => res.data)
            .catch(err => {
                console.error(err); 
            })
            this.pushLoading = false;
            if (data['error']){
                this.$message({
                    showClose: true,
                    type: 'error',
                    message: data['message']
                });
            }else{
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: `推送成功${data['success']}条,剩余${data['remain']}次`
                });
            }
        },
        getUnmarkedLink(){
            return axios.get('http://localhost/api/shortlink/unmarkedlink')
        }
    },
    mounted(){
        axios.all([this.getSts(),this.getUnmarkedLink()])
        .then(axios.spread((res1, res2)=>{
            this.sts = res1.data.sts
            this.count = res1.data.count
            this.unmarkLink =  res2.data

        }))
    }
}
</script>

<style lang="scss" scoped>
/deep/.el-table__body-wrapper {
    overflow: auto !important;
}
</style>